<template>
  <section class="wrapper">
    <div class="container" ref="container">
      <div class="title" ref="title">最新教程<a href="https://microzz.com/">更多>></a></div>
      <div class="box" ref="box" id="box"></div>
      <ul>
        <li><a href="https://microzz.com/2017/02/22/carousel/">1.原生JS实现轮播图.</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/02/14/crawler/">2.Node.js实现一个小爬虫.</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/02/23/lazy-func/">3.JS惰性函数实现Ajax封装.</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/01/26/deep-copy/">4.JavaScript自定义方法实现复杂对象的深拷贝.</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/01/24/destructuringTest/">5.ES6中嵌套的对象如何解构(Destructuring)</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/01/21/listener-event/">6.JavaScript通过原型设计一个事件对象.</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/01/18/module/">7.ES6 Module</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/01/16/class/">8.ES6中的Class</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/01/15/async/">9.异步操作和Async函数</a><span>2013-09-18</span></li>
        <li><a href="https://microzz.com/2017/01/14/promise/">10.Promise对象</a><span>2013-09-18</span></li>
      </ul>
    </div>
    <div class="bottom" ref="bottom"></div>
  </section>
</template>
<script>
export default {
  name: "",
  data: () => ({

  }),
  mounted() {
    let area = document.querySelector('#box');
    let iliHeight = 24; // 单行滚动的高度
    let speed = 50; // 滚动速度
    let autoScroll;
    let delay = 1000;

    area.innerHTML += area.innerHTML;

    // 开始滚动函数
    function startScroll() {
      autoScroll = setInterval(scrollUp, speed);
      area.scrollTop++;
    }

    // 滚动时调用的函数，进行相关逻辑判断
    function scrollUp() {
      if (area.scrollTop % iliHeight == 0) {
        clearInterval(autoScroll);
        setTimeout(startScroll, delay);
      } else {
        area.scrollTop++;
        if (area.scrollTop >= area.scrollHeight/2) {
          area.scrollTop = 0;
        }
      }
    }

    // 初始滚动
    setTimeout(startScroll, delay)
  }
}
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.wrapper {
  font-size: 12px;
  line-height: 24px;
  text-align: center;
}
ul {
  list-style: none;
}
a {
  color: #333;
  text-decoration: none;
}
a:hover {
  color: #ff0000;
}

.container {
  width: 399px;
  border: 5px solid #ababab;
  border-radius: 15px;
  margin: 50px auto 0;
  box-shadow: 2px 2px 10px #ababab;
  text-align: left;
}

.title {
  height: 62px;
  overflow: hidden;
  font-size: 26px;
  line-height: 62px;
  padding-left: 30px;
  background-image: linear-gradient(top, #f05e6f, #c9394a);
  background-image: -webkit-gradient(linear, left top, left bottom,
    color-stop(0, #f05e6f), color-stop(1, #c9394a));
  border: 1px solid #f05e6f;
  border-radius: 8px 8px 0 0;
  color: #fff;
  position: relative;
}

.title a {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: inline;
  color: #fff;
  font-size: 12px;
  line-height: 24px;
}

li {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.box {
  height: 144px;
  width: 335px;
  margin-left: 25px;
  margin-top: 10px;
  overflow: hidden;
}

.box ul li {
  height: 24px;
}

.box ul li a {
  width: 180px;
  float: left;
  display: block;
  overflow: hidden;
  text-indent: 15px;
  height: 24px;
}

.box ul li span {
  float: right;
  color: #999;
}

.bottom {
  width: 399px;
  height: 10px;
  overflow: hidden;
}
</style>
